<template>
  <div class="user-page">
    <h1>User Page</h1>
    <div v-if="loading" class="loading">Loading...</div>
    <div v-else>
      <div v-if="user" class="user-info">
        <img :src="user.avatar" alt="User Avatar" class="avatar" />
        <h2>{{ user.name }}</h2>
        <p>Email: {{ user.email }}</p>
        <p>Age: {{ user.age }}</p>
        <button @click="logout" class="logout-btn">退出</button>
      </div>
      <div v-else class="user-not-found">
        <p>User not found.</p>
        <button @click="login" class="login-btn">登录</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true,
      user: null
    };
  },
  mounted() {
    // Simulating an API call to fetch user data
    setTimeout(() => {
      this.loading = false;
      this.user = {
        name: "John Doe",
        email: "johndoe@example.com",
        age: 30,
        avatar: "https://example.com/avatar.jpg"
      };
    }, 2000);
  },
  methods: {
    login() {
      // Simulating a login action
      // You can implement your own login logic here
      alert("登录");
    },
    logout() {
      // Simulating a logout action
      // You can implement your own logout logic here
      alert("退出");
    }
  }
};
</script>

<style scoped>
.user-page {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5px;
}

h1 {
  color: #333;
}

.loading {
  margin-top: 20px;
}

.user-info {
  margin-top: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 10px;
}

.logout-btn,
.login-btn {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.logout-btn:hover,
.login-btn:hover {
  background-color: #0056b3;
}

.user-not-found {
  margin-top: 20px;
  color: #ff0000;
}
</style>
